<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box3 {
            display: flex;
            justify-content: space-between;
            background: rgb(0, 153, 203);

        }

        .box2 {
            font-size: 20px;
            color: #fff;
            padding: 20px;

        }

        .box {
            padding: 20px;
            font-size: 20px;
            font-weight: bolder;
            color: #fff;
        }

        .box1 {
            display: flex;
        }

        .box1 .left {
            width: 10%;
            background: rgb(45, 62, 80);
            color: #fff;
        }

        .box1 .left div {
            margin-top: 20px;
        }

        .box1 .left .jt {
            margin-left: 40px;
        }

        .box4 {
            display: flex;
            justify-content: space-between;
        }

        .box4 div:nth-child(1) {
            margin-left: 50px;
            background: rgb(45, 63, 77);
            padding: 20px;
            color: #fff;

        }

        .box4 div:nth-child(2) select {
            padding: 20px;

        }

        .box5 {
            display: flex;
            justify-content: space-around;
        }

        .box5 div {
            background: rgb(1, 150, 192);
            width: 20%;
            color: #fff;
        }

        .box5 div:nth-of-type(3) {
            background: rgb(19, 195, 118);
        }

        .box5 div:nth-of-type(4) {
            background: rgb(142, 143, 127);
        }

        .box5 div p:nth-child(1) {
            padding-left: 10px;
            line-height: 30px;
        }

        .box5 div p:nth-child(2) {
            padding: 10px;
            line-height: 50px;
            font-size: 20px;
        }

        .right {
            width: 100%;
        }

        body {
            background: rgb(245, 246, 250);

        }

        .box6 {
            display: flex;
            justify-content: space-around;
        }

        .box6 div {
            background: #fff;
            width: 45%;
            height: 400px;
            margin-top: 20px;
        }

        .products {
            padding: 30px;
        }

        .products table {
            width: 100%;
            text-align: center;
            background: #fff;

        }

        .btn {
            border: none;
            background: green;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="box3">
        <div class="box">后台管理系统</div>
        <div class="box2">当前用户：bootstrap中文 角色：管理员</div>
    </div>
    <div class="box1">
        <div class="left">
            <div>后台首页<span class="jt">></span></div>
            <div>设计元素<span class="jt">></span></div>
            <div>表单元素<span class="jt">></span></div>
            <div>示例页面<span class="jt">></span></div>
            <div>常用列表<span class="jt">></span></div>
            <div>脚本插件<span class="jt">></span></div>
            <div>统计图表<span class="jt">></span></div>
        </div>
        <div class="right">
            <div class="box4">
                <div>欢迎首页</div>
                <div><select name="" id="">
                        <option value="">页签操作</option>
                    </select></div>

            </div>
            <div class="box5">
                <div>
                    <p>今日收入</p>
                    <p>100,000.00</p>
                </div>
                <div>
                    <p>昨日收入</p>
                    <p>200,000.00</p>
                </div>
                <div>
                    <p>月度累计收入</p>
                    <p>1000,000.00</p>
                </div>
                <div>
                    <p>年度累计收入</p>
                    <p>5,000,000.00</p>
                </div>
            </div>
            <div class="box6">
                <div class="sales"></div>
                <div class="online"></div>
            </div>
            <div class="products">

                <table>
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>订单号</th>
                            <th>商品名称</th>
                            <th>下单日期</th>
                            <th>状态</th>
                            <th>处理情况</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>

</html>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.js"></script>
<script src="./promise-ajax.js"></script>
<script src="./mock.js"></script>
<script src="./mockdata.js"></script>
<script>
    var online = document.querySelector('.online');
    var sales = document.querySelector('.sales');
    var e = echarts.init(sales);
    var e1 = echarts.init(online);

    e.setOption({
        title: {
            text: 'Online Store Visitors',
        },
        legend: {
            top: 25,
        },
        xAxis: {
            data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],

        },
        yAxis: {
            splitLine: {
                show: true

            }
        },
        series: [{
                showBackground: true,
                smooth: true,
                name: '当前每月收入',
                type: 'bar',
                data: [2600, 1600, 1700, 3300, 4700, 3500, 1700, 2500, 2200, 1700, 3900, 1700]
            },
            {
                type: 'bar',
                data: [2100, 1700, 1900, 3000, 4000, 3700, 1800, 2000, 2800, 2100, 3800, 3700],
                symbolSize: 5,
                symbol: 'circle',
                color: 'blue',
                smooth: true,
                name: '周期每月收入',
                itemStyle: {
                    normal: {
                        color: 'rgb(195,231,253)',
                        lineStyle: {
                            width: 2
                        },
                        shadowColor: '#000'

                    }
                }

            }

        ]
    });


    e1.setOption({
        title: {
            text: 'Online Store Visitors',
        },
        legend: {
            top: 25,
        },
        xAxis: {
            data: ['2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019',
                '2020'
            ],

        },
        yAxis: {
            splitLine: {
                show: true
            }
        },
        series: [{
                showBackground: true,
                smooth: true,
                name: '每年收入走势',
                color: 'green',
                type: 'line',
                data: [50, 55, 60, 40, 45, 40, 65, 40, 68, 20, 72, 60]
            },
            {
                type: 'line',
                data: [46, 50, 52, 48, 40, 35, 65, 45, 58, 30, 72, 56],
                symbolSize: 5,
                symbol: 'circle',
                smooth: true,
                name: '每年周期收入走势',
                itemStyle: {
                    normal: {
                        color: '#188df0',
                        borderWidth: 2,
                        color: 'rgb(142,144,134)',
                        borderColor: 'white',
                        lineStyle: {
                            width: 2
                        },
                        shadowBlur: 5,
                        shadowColor: '#000'

                    }
                }

            }

        ]
    });
    render(data.list)

    //渲染表格数据
    function render(data) {
        var str = data.map((item, index) => {
            return `<tr>
                <td>${item.email}</td>
                <td>${item.name}</td>
                <td>${item.phone}</td>
                <td>${item.ingroup}</td>
                
                <td> <button class="btn">${item.status}</button> </td>
                <td> <progress value="${item.num}" max="100"></td>
            </tr>`
        }).join('')
        document.querySelector('tbody').innerHTML = str;
    }
</script>